<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!Doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>宿舍管理系统登录</title>
<base href="<%=request.getContextPath()%>/">
<link rel="stylesheet" type="text/css" href="css/styles.css">

</head>
<body>


<div class="wrapper">
	<img src="img/logo.JPEG" width="300" height="100">
	<div id="text">
		宿舍管理系统
	</div>
	<div class="container">
		
		<h1>用户登录</h1>
		<form class="form">
			<input type="text" placeholder="用户名" id="username">
			<input type="password" placeholder="密码" id="pass">
			<button type="buuton" id="login-button">登录</button>
		</form>
		<span id="info"></span>
	</div>
	
	<ul class="bg-bubbles">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	
</div>

<script type="text/javascript" src="js/public/jquery-2.1.1.min.js"></script>
<script type="text/javascript">

$("#login-button").click(function(){
	var user=$("#username").val();
	var pass=$("#pass").val();
	if(user==""||pass==""){
		alert("用户名或密码不能为空！");
		return;
	}
	var regex_pass=/^[a-zA-Z0-9].{5,11}$/;
	var regex_user=/^1[3,4,5,7,8,9][0-9]{9}$/;
	if(!regex_user.test(user)||!regex_pass.test(pass)){
		alert("用户名或密码格式不正确!");
		return;
	}
	event.preventDefault();
	$('form').fadeOut(500);
	$('.wrapper').addClass('form-success');
	$.ajax({
		url:"user/login",
		data:{'username':user,"password":pass},
		type:"post",
		success:function(data){
			if(data==0){
				$("#info").html("<font color=green>登录成功</font>");
				location.href="jsp/index.jsp";
			}
			else if(data==1||data==2){
				$("#info").html("<font color=red>用户名或密码错误</font>");
			}
			
		}
	});
});
</script>

</body>
</html>